<template>
  <el-dialog title="发表说说" :close-on-click-modal="false" :visible.sync="visible">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="formSubmit()"
      label-width="80px"
    >
      <el-form-item label="动态内容" prop="dynamicContent">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="发表你的评论吧!!!"
          v-model="dataForm.dynamicContent"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="发布图片" prop="userId">
        <el-upload
          :auto-upload="false"
          ref="upload"
          limit="3"
          action="#"
          multiple
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-change="OnChange"
          :on-exceed="handleExceed"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="formSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: "/upload/uploadImg",
      visible: false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      dataForm: {
        dynamicContent: "",
        photoUrls: [],
      },
      dataRule: {
        dynamicContent: [
          { required: true, message: "动态内容不能为空", trigger: "blur" },
          { max: 255, message: "发表的评论不能超过255个字噢", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init() {
      this.uploadUrl = this.$http.adornUrl(`/upload/uploadImg`);
      this.visible = true;
      this.$nextTick(() => {
        this.dataForm = {
          dynamicContent: "",
          photoUrls: [],
        };
      });
    },
    formSubmit() {
      if (this.fileList.length > 0) {
        let formData = new FormData();
        this.fileList.forEach((file) => {
          formData.append("file", file.raw);
        });
        this.$http({
          url: this.uploadUrl,
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }).then(({ data }) => {
          if (data && data.code === 0) {
            for (var i = 0; i < data.imgNameList.length; i++) {
              this.dataForm.photoUrls.push(data.imgNameList[i].url);
            }
            this.dataFormSubmit();
            this.$refs.upload.clearFiles();
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        this.dataFormSubmit();
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        console.log("this.dataForm.photoUrls", this.dataForm.photoUrls);
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/generator/dynamic/save`),
            method: "post",
            data: this.$http.adornData({
              dynamicContent: this.dataForm.dynamicContent,
              photoUrls: this.dataForm.photoUrls,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      console.log("this.fileList", this.fileList);
      console.log("fileList", fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    OnChange(file, fileList) {
      console.log("fileList", fileList);
      this.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前最大上传3张图片,请删除上个文件再进行上传`);
    },
  },
};
</script>
